<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org"
      layout:decorator="backstage/layout">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
    <title>图库模版管理</title>
</head>

<body>
<div id="content" layout:fragment="content">

<script type="text/javascript">
		function paging(page){
		    $("[name=page]").val(page);
		    $("#searchForm").submit();
		}
        $(function(){
            var options = {
                    currentPage: $("[name=page]").val(),
                    totalPages: $("[name=totalPage]").val(),
                    alignment:"left",
                    itemTexts: function (type, page, current) {
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "末页";
                            case "page":
                                return page;
                        }
                    },
                    pageUrl: function(type,page,current){
                        return "javascript:paging('"+page+"');";
                    }
                }
                $('#example').bootstrapPaginator(options);
            
              $(".btn-danger").click(function(e){
                if(confirm("确定删除吗?")){
                    $.ajax({
                        url:'/imgTemp/delete.json?id='+ e.currentTarget.id,
                        type:'POST',
                        dataType:"json",
                        success:function(date) {
                            if(date.obj){
                                $(".close").click();
                                alert("删除成功！");
                                window.location.href = "/imgTemp/list.htm";
                            }else{
                               	alert("删除有误！");
                               	window.location.href = "/imgTemp/list.htm";
                            }
                        }
                    });
                } 
              }); 
        });     
            
/*             //选中查询前的状态
            $("#userStatus option[value="+$('#status_value').val()+"]").attr("selected", "true"); */
         $(function(){  
        	 $('#id-input-file-2').ace_file_input({
                 no_file: '没有图片...',
                 btn_choose: 'Choose',
                 btn_change: 'Change',
                 droppable: false,
                 onchange: null,
                 thumbnail: false
             });

        	 $('.editLanguageBT').click(function(e){
                e.preventDefault();
                $(".error").removeClass().addClass("control-group");
                $(".help-inline").remove();
                $("#edit_name").val($("#name-"+e.currentTarget.id).val());
                $("#edit_num").val($("#num-"+e.currentTarget.id).val());
                $("#edit_imgPath").attr("src",$("#imgPath-"+e.currentTarget.id).val());
                if($("#status-"+e.currentTarget.id).val()==1){
                	document.getElementById("edit_status1").checked=true;
                } else{
                	document.getElementById("edit_status2").checked=true;
                }
                $("#edit_content").val($("#content-"+e.currentTarget.id).val());
                $("#edit_id").val(e.currentTarget.id);
                $('#id-input-file-1').ace_file_input({
                    no_file: $("#imgPath-"+e.currentTarget.id).val(),
                    btn_choose: 'Choose',
                    btn_change: 'Change',
                    droppable: false,
                    onchange: null,
                    thumbnail: false
                });
                $('#editModel').modal('show');
            });

            //添加用戶前
            $(".btn-setting").click(function(e){
                $(".error").removeClass().addClass("control-group");
                $(".help-inline").remove();
                $("#add_name").val('');
                $("#add_num").val('');
                $("#add_imgPath").val('');
                document.getElementById("add_status1").checked=true;
                $("#add_content").val('');

            });
            
            $("#updateImgTemp").validate({
                checkStart : true,
                errorElement: 'span',
                errorClass: 'help-inline',
                focusInvalid: false,
                rules : {
                	name : {
                        required: true,
                        maxlength:20,
                        remote:{
                            url: "/imgTemp/checkImgTempName.json",
                            type: "post",
                            data:{
                                id: function() { return $("#edit_id").val()},
                                resourceName: function(){return $("#edit_resourceName").val();}
                            }
                        }
                    },
                    num : {
                        required: true,
                        isDigits: true,
                        maxlength:2
                    },
                    content : {
                        required: true
                    }
                },
                messages : {
                	name : {
                        required : "必须填写",
                        maxlength : "最多输入20个字符",
                        remote: "输入的模版名称已存在"
                    },
                    num : {
	                    required : "必须填写",
	                    isDigits : "必须是整数",
	                    maxlength : "最多输入2位数"
	                },
	                content : {
	                    required : "必须填写"
	                }
                },
                submitHandler : function(form) {

                	$("#updateImgTemp").ajaxSubmit(function(date,res,me){
                        if(date.suc){
                            alert("修改成功了！");
                            $(".close").click();
                            window.location.href = "/imgTemp/list.htm";
                        } else{
                        	alert("修改失败了！"+date.msg);
                        }
                    });
                },
                highlight: function (e) {
                    $(e).closest('.control-group').removeClass('info').addClass('error');
                }
            });
            
            $("#addImgTemp").validate({
                checkStart : true,
                errorElement: 'span',
                errorClass: 'help-inline',
                focusInvalid: false,
                rules : {
                	name : {
                        required: true,
                        maxlength:20,
                        remote:{
                            url: "/imgTemp/checkImgTempName.json",
                            type: "post",
                            data:{
                                resourceName: function(){return $("#edit_resourceName").val();}
                            }
                        }
                    },
                    num : {
                        required: true,
                        isDigits: true,
                        maxlength:2
                    },
                    content : {
                        required: true
                    }
                },
                messages : {
                	name : {
                        required : "必须填写",
                        maxlength : "最多输入20个字符",
                        remote: "输入的模版名称已存在"
                    },
                    num : {
	                    required : "必须填写",
	                    isDigits : "必须是整数",
	                    maxlength : "最多输入2位数"
	                },
	                content : {
	                    required : "必须填写"
	                }
                },
                submitHandler : function(form) {
                    $("#addImgTemp").ajaxSubmit(function(date,res,me){
                        if(date.suc){
                            alert("保存成功了！");
                            window.location.href = "/imgTemp/list.htm";
                        } else{
                        	alert("保存失败了！"+date.msg);
                        }
                    });
                },
                highlight: function (e) {
                    $(e).closest('.control-group').removeClass('info').addClass('error');
                }
            });
            
/*             $("#showTemplate").validate({
                checkStart : true,
                errorElement: 'span',
                errorClass: 'help-inline',
                focusInvalid: false,

                submitHandler : function(form) {
                    $("#showTemplate").ajaxSubmit(function(date,res,me){
                        if(date.suc){
                            alert("保存成功了！");
                            window.location.href = "/template/list.htm";
                        } else{
                        	alert("保存失败了！"+date.msg);
                        }
                    });
                },
                highlight: function (e) {
                    $(e).closest('.control-group').removeClass('info').addClass('error');
                }
            }); */
            
            $(".btn-inverse").click(function(e){
                $("#page").attr("value","1");
            });
        });
            
            function updateStatus(id,status){
    			$.post("/imgTemp/updateStatus.json", {
    				"id" : id,
    				"status" : status
    			}, function(data) {
    				if(data.suc){
                        alert("状态更新成功了！");
                        window.location.href = "/imgTemp/list.htm";
                    } else{
                    	alert("状态更新失败了！");
                    }
    			}, "json");
    		}            
            
    </script>
    <div class="box-content">
        <div class="row-fluid sortable">
            <div class="box span12">
            	<h3 class="row-fluid header smaller lighter blue">
                   <span class="label label-large label-pink arrowed-right">图库模版管理</span>
                </h3>
                <h3 class="row-fluid header smaller lighter blue" style="border:none;">
                    <a href="#" class="btn btn-small btn-success btn-setting" data-toggle="modal" data-target="#myModal"><i class="icon-user"></i>新建模版</a>
                </h3>
                
                <form action="/imgTemp/list.htm" method="post" id="searchForm" style="margin-left:10px;">
		            <input type="hidden"  id="page" name="page" th:value="${page.page}" />
		            <input type="hidden"  name="totalPage" th:value="${page.totalPage}" />
		            <input type="hidden" id="myUserId" th:value="${session.myUserId}" />
		            
		            	模版名称：<input type="text" class="input-xlarge focused" name="name" th:value="${page.filter[name]}"/>
		            	
		            <input type="submit" class="btn btn-info btn-inverse tpbtn" style="margin-left:10px;" value="搜索"/>				
		        </form>
        
                <div class="box-content">
                    <table class="table table-striped table-bordered bootstrap-datatable datatable">
                        <thead>
                        <tr >
                            <th style="text-align: center;">序号</th>
                            <th style="text-align: center;">模版样式</th>
                            <th style="text-align: center;">模版名称</th>
                            <th style="text-align: center;">模版图片位数量</th>
                            <th style="text-align: center;">模版状态</th>
                            <th style="text-align: center;">操作管理</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="imgTemp:${page.result}">
                        	<td th:text="${imgTemp.id}" style="text-align: center;"></td>
                            <td style="text-align: center;">
                            	<img th:src="${imgTemp.imgPath}" style="height: 120px ; width: 240px"/>
                            </td>
                            <td th:text="${imgTemp.name}" style="text-align: center;"></td>
                            <td th:text="${imgTemp.num}" style="text-align: center;"></td>
                             <td  style="text-align: center;">
                              <span th:if="${imgTemp.status == '1'}">开启</span>
                              <span th:if="${imgTemp.status == '2'}">关闭</span>
                              <input type="hidden" th:id="'name-'+${imgTemp.id}" th:value="${imgTemp.name}"/>
                            <input type="hidden" th:id="'content-'+${imgTemp.id}" th:value="${imgTemp.content}"/>
                            <input type="hidden" th:id="'num-'+${imgTemp.id}" th:value="${imgTemp.num}"/>
                            <input type="hidden" th:id="'imgPath-'+${imgTemp.id}" th:value="${imgTemp.imgPath}"/>
                            <input type="hidden" th:id="'status-'+${imgTemp.id}" th:value="${imgTemp.status}"/>
                            </td>
                            
                            <td style="text-align: center;">
                                <!--  <a class="deletebtn btn btn-small btn-danger" th:id="${imgTemp.id}" style="width: 26px;">
                                    	删除
                                </a>  -->
                                 <a class="editbtn btn btn-info btn-small " href="javascript:void(0)" th:onclick="${'updateStatus('+imgTemp.id+',1)'}" 
                                   th:if="${imgTemp.status == '2'}" style="width: 26px;">开启</a>
                                 <a class="editbtn btn btn-info btn-small " href="javascript:void(0)" th:onclick="${'updateStatus('+imgTemp.id+',2)'}" 
                                   th:if="${imgTemp.status == '1'}" style="width: 26px;">关闭</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div style="margin-bottom: 0px; margin-left: auto;margin-right: auto">
		                <div id="example" style="margin-bottom:0px"></div>
		            </div>
                </div>
            </div><!--/span-->
        </div><!--/row-->
    </div>
    <div id="myModal" class="modal hide fade in">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">×</button>
            <h3>新增图库模版</h3>
        </div>
        <form class="form-horizontal" style="margin: 0" action="/imgTemp/addOrUpdate.json" method="post" id="addImgTemp" enctype="multipart/form-data" >
            <fieldset>
                <div class="modal-body">
                    <div class="control-group">
                        <label class="control-label">模版名称：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="name" id="add_name"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">图片位数量：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="num" id="add_num"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">模版样式：</label>
                        <div class="controls">
                            <div class="widget-main" style="padding:0px;">
	                        	<input type="file" id="id-input-file-2" name="file" />
		                    </div>
		                    <div><span style="color: red">请上传一张jpg格式的图片</span></div>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">模版状态：</label>
                        <div class="controls">
                            	<input class="input-xlarge focused"  type="radio" value="1" name="status" id="add_status1" checked="true"/>开启	
                            	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            	<input class="input-xlarge focused"  type="radio" value="2" name="status" id="add_status2"/>关闭	
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">模版内容：</label>
                        <div class="controls">
                            <textarea class="input-xlarge focused"  type="text" value="" name="content" id="add_content" style="resize:vertical;"/>
                        </div>
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary btn-small" value="保存" />
                    <a href="#" class="btn btn-small" data-dismiss="modal">取消</a>
                </div>
            </fieldset>
        </form>
    </div>
    
    
    <div id="editModel" class="modal hide fade in" style="display: none;">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">×</button>
            <h3>编辑图库模版</h3>
        </div>
        <form class="form-horizontal" style="margin: 0" action="/imgTemp/addOrUpdate.json" method="post" id="updateImgTemp" enctype="multipart/form-data" >
             <input id="edit_id" name="id" type="hidden"/>
            <fieldset>
                <div class="modal-body">
                	                    <div class="control-group">
                        <label class="control-label">模版名称：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="name" id="edit_name"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">图片位数量：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="num" id="edit_num"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
	                        <label class="control-label">模版样式：</label>
	                        <div class="controls">
	                            <div class="widget-main">
		                        	<input type="file" id="id-input-file-1" name="file" />
			                    </div>
	                        </div>
	                        <div class="controls">
	                            <div class="widget-main">
		                        	<img src="" id="edit_imgPath" style="height: 120px"/>
			                    </div>
	                        </div>
	                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">模版状态：</label>
                        <div class="controls">
                            	开启	<input class="input-xlarge focused"  type="radio" value="1" name="status" id="edit_status1" checked="true"/>
                            	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            	关闭	<input class="input-xlarge focused"  type="radio" value="2" name="status" id="edit_status2"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">模版内容：</label>
                        <div class="controls">
                            <textarea class="input-xlarge focused"  type="text" value="" name="content" id="edit_content" />
                        </div>
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary btn-small" value="保存" />
                    <a href="#" class="btn btn-small" data-dismiss="modal">取消</a>
                </div>
            </fieldset>
        </form>
    </div>
    
</div>
</body>
</html>
